<template>
  <div>
    <view class="swiper-item" :id="item.id" :class="{offline: item.online_status == '0' && !item.lawyer_status}">  <!-- '0'不在线  '1'在线  item.lawyer_status:false不是我的关注的数据-->
      <view class="swiper-user">
        <div class="info-box">
          <view class="user-avatar">
            <image :src="item.avatar" mode="scaleToFill" /> <!-- 头像 -->
          </view>
          <div class="user-info">
            <div class="name">
              <div class="user-name">{{item.reply_realname}}</div> <!-- 名字 -->
            </div>
            <div class="user-company">{{item.affiliated_company}}</div><!-- 公司 -->
          </div>
        </div>
        <div v-if="!item.lawyer_status">  <!-- 不是我的关注页面的数据，并且status是0的时候才显示 -->
          <div v-if="item.online_status == '0'" class="offline-btn">不在线</div>
        </div>
      </view>
      <div class="swiper-container">
        <div class="swiper-tag" v-if="!item.lawyer_status">  <!-- 我的关注页面不显示 -->
          <div
            class="tag"
            :class="itemTag.className"
            v-for="(itemTag, tagIndex) in itamTag"
            :key="tagIndex"
          >{{itemTag.text}}</div>  <!-- 律师标签 推荐 -->
        </div>
        <div class="swiper-content" :class="{lawyer_status: item.lawyer_status}"> <!-- 我的关注页面特殊处理样式 -->
          <div class="law-tag-box">  <!-- 问题标签 -->
            <div
              class="law-tag"
              v-for="(itemLawTag, lawTagIndex) in questionTag"
              :key="lawTagIndex"
            >{{itemLawTag}}</div>
          </div>
          <div class="content-hybrid">
            <div class="evaluate-info" :class="{'lawyer_status-info': item.lawyer_status}">
              <div class="fu">
                回复：
                <text class="fu-num">{{item.reply_total > 999 ? '999+' : item.reply_total}}</text>个
              </div>
              <div class="fu">
                好评：
                <text class="fu-num">{{item.praise_total > 999 ? '999+' : item.praise_total}}</text>个
              </div>
            </div>
            <!-- 我的关注页面 不显示 -->
            <navigator
              v-if="item.online_status == '1' && !item.lawyer_status"
              :url="'/pages/lawer/detail?id='+item.id"
              class="zixun-btn"
            >咨询</navigator>
            <div v-else-if="item.online_status == '0' && !item.lawyer_status" class="zixun-btn">咨询</div>
          </div>
        </div>
      </div>
    </view>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object
    }
  },
  computed: {
    // 问题标签，最多6个
    questionTag(){
      this.item.main_category.length > 6 ? this.item.main_category.length = 6 : null
      return this.item.main_category
    },
    itamTag(){
      if(!this.item.label || this.item.label.length == 0){
        return []
      }
      let temp = []
      this.item.label.forEach(e => {
        switch(e){
          case '推荐':
          temp.push({
            text: e,
            className: 'tui'
          })
          break;
          case '优秀':
          temp.push({
            text: e,
            className: 'you'
          })
          break;
          case '特邀':
          temp.push({
            text: e,
            className: 'te'
          })
          break;
          case '高效':
          temp.push({
            text: e,
            className: 'gao'
          })
          break;
        }
      });
      return temp
    }
  },
};
</script>
<style lang='less' scoped>
// 引入工具less
@import "@/common/util.less";
.swiper-item {
  // width: 90%;
  min-height: 305rpx;
  margin-right: 23rpx;
  box-shadow: @shadow;
  padding: 16rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .swiper-user {
    .gh-between();
    padding-bottom: 16rpx;
    .info-box {
      .flex();
      .user-avatar {
        image {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
        }
      }
      .user-info {
        padding-left: 22rpx;
        .name {
          display: flex;
          color: #6c76a7;
          .user-name {
            font-size: 32rpx;
            margin-right: 8rpx;
          }
        }
        .user-company {
          font-size: 24rpx;
          color: #abb2ce;
          letter-spacing: 4rpx;
        }
      }
    }
  }
  .swiper-container {
    display: flex;
    min-height: 190rpx;
    .swiper-tag {
      margin-right: 34rpx;
      .tag {
        font-size: 20rpx;
        padding: 6rpx 15rpx;
        border-radius: 25rpx;
        color: #fff;
        margin-bottom: 10rpx;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .tui {
        background-color: #e59177;
      }
      .te {
        background-color: #dec4bb;
      }
      .you {
        background-color: #7189da;
      }
      .gao {
        background-color: #f6d588;
      }
    }
    .swiper-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 190rpx;
      .law-tag-box {
        .flex();
        flex-wrap: wrap;
        .law-tag {
          .gh-center();
          width: calc(30% - 30rpx);
          font-size: 24rpx;
          color: #6c76a7;
          padding: 5rpx 10rpx;
          border: 1px solid #6c76a7;
          border-radius: 25rpx;
          margin-bottom: 10rpx;
          margin-right: 5%;
          &:nth-child(3n){
            margin-right: 0;
          }
          
        }
      }
    }
    .lawyer_status{
      width: calc(100% - 112rpx);
      margin-left: calc(100% - (100% - 112rpx));
    }
    .content-hybrid {
      .gh-between();
      .evaluate-info {
        height: 68rpx;
        flex: 1;
        .flex();
        align-items: flex-end;
        padding-right: 10rpx;
        .fu {
          font-size: 24rpx;
          color: @font-color;
          &:first-child {
            margin-right: 3%;
          }
          .fu-num {
            color: #fea388;
          }
        }
      }
      .zixun-btn {
        padding: 10rpx 25rpx;
        font-size: 30rpx;
        color: #fff;
        border-radius: 40rpx;
        background-color: #849aff;
      }
    }
  }
}

// 不在线
.offline {
  .swiper-user {
    .info-box {
      .user-avatar {
        image {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          filter: grayscale(100%);
        }
      }
      .user-info {
        .name {
          color: #838383;
        }
        .user-company {
          color: #d1d1d1;
        }
      }
    }
    .offline-btn {
      .gh-center();
      width: 108rpx;
      height: 40rpx;
      border-radius: 20rpx;
      background-color: #fea388;
      font-size: 20rpx;
      color: #fff;
    }
  }
  .swiper-container {
    .swiper-tag {
      .tui {
        background-color: #c5c5c5;
      }
      .te {
        background-color: #c5c5c5;
      }
      .you {
        background-color: #adadad;
      }
      .gao {
        background-color: #e9e9e9;
      }
    }
    .swiper-content {
      flex: 1;
      .law-tag-box {
        .law-tag {
          color: #838383;
          border: 1px solid #e3e3e3;
        }
      }
    }
    .content-hybrid {
      .evaluate-info {
        .fu {
          color: #838383;
          .fu-num {
            color: #d1d1d1;
          }
        }
      }
      .zixun-btn {
        padding: 10rpx 25rpx;
        font-size: 30rpx;
        color: #fff;
        border-radius: 40rpx;
        background-color: #d1d1d1;
      }
    }
  }
}
.lawyer_status-info{
  align-items: center !important;
}
</style>